<template>
  <div>
    <el-dialog
      title="新建借用单"
      :visible.sync="visible"
      :modal-append-to-body="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="closeDialog"
      
      fullscreen
    >
      <div class="warn">
        <p>
          <strong>说明:</strong>
          <br />标记*的必须录入数据的字段
          <br />
        </p>
      </div>
      <div class="form"></div>
      <el-form
        ref="submit"
        :model="submit"
        label-position="left"
        label-width="105px"
        size="mini"
        inline
      >
        <el-form-item label="单号" label-width="50px">
          <el-input v-model="submit.ref" readonly placeholder="提交后自动生成"></el-input>
        </el-form-item>
        <el-form-item label="*预借出日期" label-width="90px">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="submit.date"
            value-format="yyyy-MM-dd"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <br />
        <el-form-item label="组织机构" label-width="75px">
          <el-input v-model="submit.orangename" readonly style="width:300px;"></el-input>
        </el-form-item>
        <br />
        <el-form-item label="借用人" label-width="68px">
          <el-input v-model="submit.borrower" readonly></el-input>
        </el-form-item>
        <el-form-item label="借用仓库" label-width="75px">
          <el-input v-model="submit.storename" style="width:150px;"></el-input>
        </el-form-item>
        <el-form-item label="*业务员" label-width="68px">
          <el-input v-model="submit.bizname" style="width:150px;"></el-input>
          <el-popover placement="right" width="300" v-model="UserListApp.visible">
            <div style="width:300px">
              <el-table
                border
                :data="Lists.userList"
                @row-click="selectUser"
                :stripe="true"
                :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
                :row-style="{height:'5px'}"
                :cell-style="{padding:'5px 0'}"
                tooltip-effect="light"
                highlight-current-row
                style="width: 100%;"
                height="300px"
              >
                <el-table-column prop="name" label="姓名"></el-table-column>
              </el-table>
              <div style="width:100px;background:red;margin:3px auto;">
                <el-button type="primary" @click="SureSelectUser">确定选择业务员</el-button>
              </div>
            </div>
            <el-button slot="reference" @click="UserListApp.visible=true">选择</el-button>
          </el-popover>
        </el-form-item>
        <br />
        <el-form-item label="备注" label-width="40px">
          <el-input v-model="submit.memo" style="width:700px;"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-table
          border
          :data="App_Borrow_Detail_List.list"
          size="mini"
          :row-style="{height:'5px'}"
          :cell-style="{padding:'5px 0'}"
        >
          <el-table-column  label="序号" width="50">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="商品编码" width="250"></el-table-column>
          <el-table-column label="商品名称" prop="name" width="200"></el-table-column>
          <el-table-column show-overflow-tooltip prop="spec" label="规格型号" width="250"></el-table-column>
          <el-table-column prop="count" show-overflow-tooltip label="借用数量" width="95"></el-table-column>
          <el-table-column show-overflow-tooltip label="单位" prop="unitname" width="125"></el-table-column>

          <el-table-column prop="memo" show-overflow-tooltip label="备注" width="410"></el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="visible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="Submit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import treeTable from "../../multiplexing/treetable";
export default {
  components: { treeTable },
  props: {
    form: {
      style: Object
    },
    detail_list: {}
  },
  data() {
    return {
      selectUserList: [],
      submit: {
        id: "",
        ref: "",
        date: "",
        orangename: "",
        borrower: "",
        storeid: "",
        storename: "",
        bizname: "",
        memo: "",
        statu: "待审核"
      },
      visible: true,
      Lists: {
        orangeList: [],
        userList: []
      },
      UserListApp: {
        visible: false
      },
      App_Borrow_Detail_List: {
        list: [],
        SelectRow: {}
      },
      storeList: []
    };
  },
  methods: {
    //控制两位小数输入
    oninput(e) {
      e.target.value =
        e.target.value.match(/^\d*([.]?([0-9]{0,2}))/g)[0] || null;
    },
    Check() {
      if (
        this.submit.date == null ||
        this.submit.date == "" ||
        this.submit.bizname == null ||
        this.submit.bizname == ""
      ) {
        this.$message.error("请录入完整的数据！");
        return false;
      }
      return true;
    },
    Submit() {
      
      window.console.log(this.submit);
      window.console.log('form',this.form);
      var day = new Date();
      day.setTime(day.getTime());
      this.submit.ref =
        "SBO" +
        day.getFullYear() +
        (day.getMonth() + 1) +
        day.getDate() +
        day.getHours() +
        day.getMinutes() +
        day.getSeconds();
      this.submit.statu = "待出库";
      if (this.Check()) {
        this.$http.post("storeborrow/insert", this.submit).then(response => {
          if (response.data == "success") {
            this.form.statu = "待借用";
            this.$http.post("/borrow/update", this.form).then(response => {
              if (response.data == "success") {
                if (response.data == "success") {
                  this.$message({
                    message: "完成生成仓库借出单",
                    type: "success"
                  });
                  this.NeedRefresh();
                  this.visible = false;
                }
              }
            });
          }
        });
      }
    },
    closeDialog() {
      window.console.log("dfialog-close");
      this.$emit("dialog-close");
    },
    NeedRefresh() {
      this.$emit("refresh");
    },
    selectUser(Row) {
      this.submit.bizname = Row.name;
    },
    selectGood(Row) {
      this.miniApp_Good_List.SelectRow = JSON.parse(JSON.stringify(Row));
    },
    GetLists() {
      this.$http.get("/user/list").then(response => {
        this.Lists.userList = response.data;
      });
      this.$http
        .post("BorrowDetailDetail/somelist", { borrowref: this.submit.id })
        .then(response => {
          this.App_Borrow_Detail_List.list = response.data;
        });
    },
    SureSelectUser() {
      this.UserListApp.visible = false;
    }
  },
  created() {
    this.submit = JSON.parse(JSON.stringify(this.form));
    this.submit.ref = "";
    this.submit.bizname = "";
    this.submit.borrowref = this.form.id;
    this.GetLists();
  }
};
</script>

<style>
.form {
  margin-top: 20px;
}
</style>